/*
 * @Author: xiaosihan 
 * @Date: 2024-10-20 07:52:32 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-20 13:56:34
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./adminProcessCategory.module.less";
import { Table, TableColumnType } from "antd";
import adminProcessCategoryStore from "./adminProcessCategoryStore";

interface Iprops {
    children?: ReactNode
}

//加工类目
export default function AdminProcessCategory() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    const [pageNum, setPageNum] = useState(adminProcessCategoryStore.pageNum);
    const [list, setList] = useState(adminProcessCategoryStore.list);
    const [total, setTotal] = useState(adminProcessCategoryStore.total);

    useEffect(() => {
        adminProcessCategoryStore.getList();
    }, []);

    useEffect(() => autorun(() => {
        setList(adminProcessCategoryStore.list);
        setTotal(adminProcessCategoryStore.total);
    }, { delay: 10 }), []);

    const columns: Array<TableColumnType> = [
        {
            title: '用户ID',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '手机号',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '标签',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '用户类别',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '模型',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '订单',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '是否可用',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '注册时间',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '操作',
            align: "left",
            dataIndex: 'content',
            key: 'content'
        }
    ]

    return (
        <div
            ref={dom}
            className={styles.adminProcessCategory}
        >
            <div className={styles.title} >加工类目</div>

            <Table
                columns={columns}
                dataSource={[]}
                pagination={{
                    total: 100,
                    current: pageNum,
                    pageSize: 10,
                    onChange(pageNum, pageSize) {
                        adminProcessCategoryStore.getList(pageNum, pageSize);
                    },
                }}
            />

        </div>
    );

}